<template>
  <div class="app-content">
    <!-- 顶部tips -->
    <div class="tips" ref="tips">
      <h3>退货入库明细</h3>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="供货厂商">
          <el-select
            size="small"
            v-model="SearchForm.OrderType"
            placeholder="请选择厂商"
          >
            <el-option
              value-key="id"
              :label="value.name"
              :value="value.id"
              v-for="value in Options"
              :key="value.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="OnSeacrh"
            >查询</el-button
          >
          <!-- <el-button size="mini" type="success" @click="CreateDialog"
            >新增</el-button
          > -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 中间表格部分 -->
    <el-table
      v-if="tabaleHeight.length"
      ref="table"
      :data="tableData"
      border
      style="width: 100%"
      :height="tabaleHeight"
      size="mini"
      v-loading="loading"
    >
      <el-table-column
        :label="item.title"
        :width="item.width"
        show-overflow-tooltip
        v-for="item in Page.tableHeader"
        :key="item.title"
      >
        <template v-slot="scope">
          <ColumnTable :CurretItem="scope.row" :ItemValue="item.value" />
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template v-slot="scope">
          <el-button
            size="mini"
            type="text"
            :disabled="scope.row.ship_style == 1"
            @click="UpdataDialog(scope.row, 'UpdataDialog')"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            :disabled="scope.row.ship_style == 2"
            @click="DelCurrentItem(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="paramsquery.pageIndex"
        :page-size="paramsquery.pageSize"
        layout="total, prev, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 全局表单弹窗 -->
    <DialogComponent
      ref="DialogComponent"
      :Dialog="Dialog"
      :Mobile="Mobile"
      @Submit="Submit"
    />
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex"; // 引入vuex属性
import mixin from "@/mixins/mixin"; // 引入mixin
import { GetStockDownInList } from "@/api/index"; // 列表接口
import { GetSupplierList, GetWarehouseList } from "@/api/index"; // 供货商列表 仓库列表
import { addStockDownIn, UpdateStockDownIn, DelStockDownIn } from "@/api/index"; // 新增退货入库 修改退货入库 删除退货入库
import { Page } from "./index"; // 引入页面信息
export default {
  mixins: [mixin],
  data() {
    return {
      /* 页面信息 */
      Page,
      /* 搜索部分 */
      SearchForm: {
        OrderType: 0,
      },
      Options: [
        {
          id: 0,
          name: "全部",
        },
      ],
      /* 表格部分 */
      loading: true,
      tableData: [],
      paramsquery: {
        pageIndex: 1,
        pageSize: 30,
      },
      total: 0,
      /* 弹窗的信息 默认指定一个 */
      Dialog: Page.Dialog.UpdataDialog,
    };
  },
  computed: {
    ...mapState(["isMobile", "CurrentItem"]),
  },
  created() {},
  mounted() {
    this.GetDataList();
    this.GetOptionsList();
    this.GetWarehouseOptionsList();
  },
  watch: {},
  methods: {
    ...mapActions(["SetCurrentItem"]), // 搜索列表
    OnSeacrh() {
      this.paramsquery.pageIndex = 1;
      this.GetDataList();
    },

    // 获取厂商列表
    GetOptionsList() {
      GetSupplierList().then((res) => {
        // console.log(res);
        this.Options = this.Options.concat(res);
        res.map((item) => {
          item.value = String(item.id);
          item.label = item.name;
        });
        this.Page.Dialog.CreateDialog.DialogFormType[0].options = res;
        this.Page.Dialog.UpdataDialog.DialogFormType[0].options = res;
      });
    },
    // 获取仓库列表
    GetWarehouseOptionsList() {
      GetWarehouseList().then((res) => {
        // console.log(res);
        res.map((item) => {
          item.value = String(item.id);
          item.label = item.name;
        });
        // console.log(this.PageInfo);
        this.Page.Dialog.CreateDialog.DialogFormType[1].options = res;
        this.Page.Dialog.UpdataDialog.DialogFormType[1].options = res;
      });
    },
    // 请求列表数据
    GetDataList() {
      this.loading = true;
      const data = {
        pageIndex: this.paramsquery.pageIndex,
        supplier_id: this.SearchForm.OrderType,
      };
      GetStockDownInList(data).then((res) => {
        // console.log(res);
        this.loading = false;
        res.orderList.map((item) => {
          Object.entries(item).forEach(([key, value]) => {
            if (value === null) {
              item[key] = "";
            }
          });
        });
        this.tableData = res.orderList;
        this.pageIndex = res.pageIndex;
        this.pageSize = res.pageSize;
        this.total = res.pageTotal;
      }).catch(err =>{
        console.log(err);
        this.loading = false
      })
    },
    // 新增换货流转单
    CreateDialog() {
      const { DialogForm } = this.Page.Dialog["CreateDialog"];
      Object.entries(DialogForm).forEach(([key]) => {
        DialogForm[key] = "";
      });
      this.Dialog = this.Page.Dialog["CreateDialog"];
      this.$refs.DialogComponent.openModal("CreateDialog");
    },
    // 修改备货入库弹窗
    UpdataDialog(rows, name) {
      this.DialogType = name;
      const { DialogForm, DialogFormType } = this.Page.Dialog[name];
      DialogFormType.forEach((item) => {
        DialogForm[item.value] = rows[item.value]
          ? String(rows[item.value])
          : "";
      });
      this.SetCurrentItem(rows);
      this.Dialog = this.Page.Dialog[name];
      this.$refs.DialogComponent.openModal(name);
    },
    // 确认弹窗的信息
    Submit(e) {
      // console.log(e);
      if (e.DialogTtile == "新增退货入库") this.CreateOrder(e.form);
      if (e.DialogTtile == "修改退货入库") this.UpdataInfo(e.form);
    },
    // 新增确认
    CreateOrder(e) {
      const data = {
        supplier_id: e.supplier_id,
        warehouse_id: e.warehouse_id || null,
        sku: e.sku || null,
        sku_name: e.sku_name || null,
        scrap_first_stock_num: null,
        scrap_first_stock_price: null,
        return_order_id: e.return_order_id || null,
        retrun_sku_num: e.retrun_sku_num || null,
        remark: e.remark || null,
      };
      // console.log(data);
      addStockDownIn(data).then((res) => {
        if (res.msg) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.GetDataList();
          this.$refs.DialogComponent.closeModal();
        } else {
          this.$message.error("新增失败");
        }
      });
    },
    // 确认修改
    UpdataInfo(e) {
      const data = {
        id: this.CurrentItem.id,
        supplier_id: e.supplier_id,
        warehouse_id: e.warehouse_id || null,
        sku: e.sku || null,
        sku_name: e.sku_name || null,
        scrap_first_stock_num: null,
        scrap_first_stock_price: null,
        return_order_id: e.return_order_id || null,
        retrun_sku_num: e.retrun_sku_num || null,
        remark: e.remark || null,
      };
      UpdateStockDownIn(data).then((res) => {
        // console.log(res);
        if (res.msg) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.GetDataList();
          this.$refs.DialogComponent.closeModal();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    // 删除本条退货入库数据
    DelCurrentItem(e) {
      // console.log(e);
      this.$confirm(`您确定要删除本条数据吗？`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DelStockDownIn(e.id).then((res) => {
            if (res.msg) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.GetDataList();
            } else {
              this.$message.error("删除成功");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  components: {},
};
</script>

<style scoped lang="less">
@import url(../../../style/index.css);

/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
